<%@ page language="JAVA" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%
        String bathPath = request.getContextPath();
        pageContext.setAttribute("bathPath", bathPath);
    %>
    <meta charset="UTF-8">
    <title>时间段维护</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="${bathPath}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${bathPath}/css/common.css">
    <link rel="stylesheet" href="${bathPath}/css/timeSlot.css">
    <style>
        .layui-form-label {
            width: 123px;
        }
        .layui-layer-page .layui-layer-content{
            overflow-y:auto !important;
        }
    </style>
</head>
<body>

<div class="layui-btn-group ml-54 demoTable radius">
    <button class="layui-btn layui-btn-normal" data-type="add">新增</button>
</div>
<table class="layui-hide" id="timeSlotTable" lay-filter="test"></table>
<!--添加弹出层-->
<div  id="addMask" style="display: none;">
    <form class="layui-form time-slot" action="#" id=runForm" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">时段名称</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="schName" id="schName" lay-verify="required" placeholder="请输入时段名称">
                <input type="hidden" name="id" id="id">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上班时间</label>
            <div class="layui-input-inline">
                <input type="text" name="startTimeStr" class="layui-input" id="startTimeStr" lay-verify="required" placeholder="请选择时间">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">下班时间</label>
            <div class="layui-input-inline">
                <input type="text" name="endTimeStr" class="layui-input" id="endTimeStr" lay-verify="required" placeholder="请选择时间">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">开始签到时间</label>
            <div class="layui-input-inline">
                <input type="text" name="checkInTime1Str" class="layui-input" id="checkInTime1Str" lay-verify="required" placeholder="请选择时间">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">结束签到时间</label>
            <div class="layui-input-inline">
                <input type="text" name="checkInTime2Str" class="layui-input" id="checkInTime2Str" lay-verify="required" placeholder="请选择时间">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">开始签退时间</label>
            <div class="layui-input-inline">
                <input type="text" name="checkOutTime1Str" class="layui-input" id="checkOutTime1Str" lay-verify="required" placeholder="请选择时间">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">结束签退时间</label>
            <div class="layui-input-inline">
                <input type="text" name="checkOutTime2Str" class="layui-input" id="checkOutTime2Str" lay-verify="required" placeholder="请选择时间">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">记为多少工作日</label>
            <div class="layui-input-inline">
                <input type="text" name="workDay" class="layui-input" id="workDay" lay-verify="required|number" placeholder="请输入工作日">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">记为多长时间(分钟)</label>
            <div class="layui-input-inline">
                <input type="text" name="workMins" class="layui-input" id="workMins" lay-verify="required|number" placeholder="请输入时长">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否必须签到</label>
            <div class="layui-input-inline">
                <input type="radio" name="checkIn" value="0" title="否">
                <input type="radio" name="checkIn" value="1" title="是" checked>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否必须签退</label>
            <div class="layui-input-inline">
                <input type="radio" name="checkOut" value="0" title="否">
                <input type="radio" name="checkOut" value="1" title="是" checked>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button lay-submit class="layui-btn layui-btn-normal" lay-filter="formTest" id="confirm">确定</button>
                <button type="button" class="layui-btn layui-btn-primary cancel-layer">取消</button>
            </div>
        </div>
    </form>
</div>


<script type="text/html" id="barDemo">
<%--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增</a>--%>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="${bathPath}/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${bathPath}/js/common.js"></script>
<script>
    var layerIndex = null;
    var ids = ['#startTimeStr','#endTimeStr','#checkInTime1Str','#checkInTime2Str','#checkOutTime1Str','#checkOutTime2Str'];
    $(function () {
        initLayUI();
    })
    function initLayUI() {
        layui.use(['form', 'laydate', 'layer', 'table'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            var table = layui.table;
            var layer = layui.layer;


            table.render({
                elem: '#timeSlotTable'
                , url: '${bathPath}/schClass/selectAll.action'
                , toolbar: true
                , title: '员工在岗表'
                ,height: 'full-38'
                , cols: [[
                      {field: 'schName', title: '时段名称',minWidth:100}
                    , {field: 'startTimeStr', title: '上班时间',minWidth:100}
                    , {field: 'endTimeStr', title: '下班时间',minWidth:100}
                    , {field: 'lateTime', title: '迟到时长',hide: true}
                    , {field: 'earlyLeaveTime', title: '早退时长',style:'display:none',hide: true}
                    , {field: 'checkInTime1Str', title: '开始签到时间',minWidth:130}
                    , {field: 'checkInTime2Str', title: '结束签到时间',minWidth:130}
                    , {field: 'checkOutTime1Str', title: '开始签退时间',minWidth:130}
                    , {field: 'checkOutTime2Str', title: '结束签退时间',minWidth:130}
                    , {field: 'workDay', title: '工作日',minWidth:100}
                    , {field: 'workMins', title: '多长时间',hide: true}
                    , {field: 'checkIn', title: '是否必须签到',hide: true }
                    , {field: 'checkOut', title: '是否必须签退',hide: true}
                    ,{toolbar:'#barDemo',title:'操作',width:158}
                ]]
                , page: false
                , response: {
                    statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , id: 'testReload'
            });

            var $ = layui.$, active = {
                reload: function () {
                    //执行重载
                    table.reload('testReload', {
                        where: {
                        }
                    });
                    // $('table.layui-table thead tr th:eq(3),table.layui-table thead tr th:eq(4),table.layui-table thead tr th:eq(10),table.layui-table thead tr th:eq(11),table.layui-table thead tr th:eq(12)').addClass('layui-hide');
                    // table.render();
                }
            };

            // $('table.layui-table thead tr th:eq(3),table.layui-table thead tr th:eq(4),table.layui-table thead tr th:eq(10),table.layui-table thead tr th:eq(11),table.layui-table thead tr th:eq(12)').addClass('layui-hide');
            // table.render();


            $('.radius .layui-btn').on('click', function () {
                $('#confirm').data('num',0);
                runEvent();
            });

            //监听工具条
            table.on('tool(test)', function (obj) {
                var data = obj.data;

                if (obj.event === 'add') {
                    //传入add逻辑事件
                    $('#confirm').data('num',0);
                    runEvent();
                } else if(obj.event === 'del'){
                    layer.confirm('真的删除该时间段吗', function(index){
                        var dataJson = {};
                        dataJson.id = data.id;
                        $.ajax({
                            type: 'POST',
                            data: {schClassId:data.id},
                            contentType:"application/x-www-form-urlencoded",
                            url: '${bathPath}/numRun/findNumRunBeanById.action',
                            success: function (res) {
                                if(res.length === 0){
                                    $.ajax({
                                        type: 'POST',
                                        data: dataJson,
                                        contentType:"application/x-www-form-urlencoded",
                                        url: '${bathPath}/schClass/delete.action',
                                        success: function (data) {
                                            if (data == 'SUCCESS') {
                                                layer.alert('时间段已删除!',{
                                                    icon:1,
                                                    title:'提示'
                                                })
                                                layer.close(index);
                                                active.reload();
                                            }
                                        }
                                    })
                                }else{
                                    layer.alert('该时间段正在使用中,无法删除!',{
                                        icon:2,
                                        title:'提示'
                                    })
                                }
                            }
                        })


                    });
                } else if (obj.event === 'edit') {
                    //传入编辑逻辑事件
                    $('#confirm').data('num',1);
                    runEvent(data);
                } else if (obj.event === 'cancel') {
                    layer.close(layerIndex);
                }
            });



            $('.cancel-layer').on('click', function () {
                layer.close(layerIndex);
            })

            form.on('submit(formTest)', function (data) {
                var num = $('#confirm').data('num');
                var dataJson = data.field;
                var time = '1970-01-01 ';
                dataJson.startTimeStr = time + dataJson.startTimeStr;
                dataJson.endTimeStr = time + dataJson.endTimeStr;
                dataJson.checkInTime1Str = time + dataJson.checkInTime1Str;
                dataJson.checkInTime2Str = time + dataJson.checkInTime2Str;
                dataJson.checkOutTime1Str = time + dataJson.checkOutTime1Str;
                dataJson.checkOutTime2Str = time + dataJson.checkOutTime2Str;
                if(num === 0){
                    $.ajax({
                        type: 'POST',
                        data: dataJson,
                        contentType:"application/x-www-form-urlencoded",
                        url: '${bathPath}/schClass/insert.action',
                        success: function (data) {
                            if (data == 'SUCCESS') {
                                layer.close(layerIndex);
                                active.reload();
                            }
                        }
                    })
                }else if(num === 1){
                    $.ajax({
                        type: 'POST',
                        data: dataJson,
                        contentType:"application/x-www-form-urlencoded",
                        url: '${bathPath}/schClass/update.action',
                        success: function (data) {
                            if (data == 'SUCCESS') {
                                layer.close(layerIndex);
                                active.reload();
                            }
                        }
                    })
                }
                layer.close(layerIndex);
                return false;
            })

            var dateSelect = function (id) {
                laydate.render({
                    elem: id
                    , type: 'time'
                    ,format:'HH:mm'
                    ,trigger: 'click'
                });
            }



            var runEvent = function(){
                //初始化表单值
                var title = '';
                if(arguments.length > 0){
                    var data = arguments[0];
                    form.val('example',{
                        'id':data.id,
                        'schName':data.schName,
                        'startTimeStr':data.startTimeStr,
                        'endTimeStr':data.endTimeStr,
                        'checkInTime1Str':data.checkInTime1Str,
                        'checkInTime2Str':data.checkInTime2Str,
                        'checkOutTime1Str':data.checkOutTime1Str,
                        'checkOutTime2Str':data.checkOutTime2Str,
                        'workDay':data.workDay,
                        'checkIn':data.checkIn,
                        'checkOut':data.checkOut,
                        'workMins':data.workMins
                    })
                    title = '修改时间段';
                }else{
                    form.val('example',{
                        'schName':'',
                        'startTimeStr':'',
                        'endTimeStr':'',
                        'checkInTime1Str':'',
                        'checkInTime2Str':'',
                        'checkOutTime1Str':'',
                        'checkOutTime2Str':'',
                        'workDay':'',
                        'checkIn':'',
                        'checkOut':'',
                        'workMins':''
                    })
                    title = '新增时间段';
                }
                layerIndex = layer.open({
                    type: 1
                    ,title: title //不显示标题栏
                    ,area: '400px;'
                    ,shade: 0.8
                    ,id: 'LAY_layuipro2' //设定一个id，防止重复弹出
                    // ,btn: ['确定', '取消']
                    // ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: $('#addMask')
                    ,success:function(layero,index){
                        console.log(layero);
                        //日期时间选择器
                        for(var i in ids){
                            dateSelect(ids[i]);
                        }
                        form.render();
                    }
                    ,end:function(){
                        form.val('example',{
                            'schName':'',
                            'startTimeStr':'',
                            'endTimeStr':'',
                            'checkInTime1Str':'',
                            'checkInTime2Str':'',
                            'checkOutTime1Str':'',
                            'checkOutTime2Str':'',
                            'workDay':'',
                            'checkIn':'',
                            'checkOut':'',
                            'workMins':''
                        })
                    }
                });
            }
        });
    }
</script>
</body>
</html>